/*
  grasshopper.css
*/

#body-container {
  background-image:  url(../img/grabag.jpg);
  background-repeat: repeat;
}

#title {
  font-size:1.5em;
  font-weight:bold;
  color:brown;
  margin: 0 0 5px 0;
}

.grasshopper .top-wrapper {
  padding: 5px 0px 5px 0px;
  margin: 0 0 10px 0;
}

/******************************************
 Widget

<div class="conversation">
<table>
  <tbody>
    <tr class="grasshopper">
      <td>Grasshopper</td>
      <td>What is that for, Master?</td>
    </tr>
    <tr>
      <td>Master</td>
      <td>Your Kung Fu practice timetable.</td>
    </tr>
  </tbody>
</table>
</div>
--------------------------------------- **/
.conversation table {
  text-align: left;
  height: 172px;
  width: 577px;
  padding: 2px;
  border-spacing: 3px;
  color: white; /*silver;*/
  font-size: 1.2em;
  line-height: 1.5em;
}
.conversation tr {
  height: 1.7em;
}
.conversation td:first-child {  /* 1st td */
  vertical-align: top;
  text-align: right;
  color: gold;
  font-weight: bold;
}
.conversation tr.grasshopper td:first-child { /* 1st id with class="grasshopper" */
  color: #00CC00;
}
.conversation td {  /* 1st td */
  width: 85px;
}
.conversation td + td { /* 2nd td */
  width: 474px;
}

/** ----------------------------------------------- */
/*
  studyTimetable.css
*/

/******************************************
 Widget

<div class="study-timetable">
<table>
  <thead>
    <tr>
      <th>Day of Week</th>
      <th>Study Time</th>
      <th>Minimum Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>16:30 - 18:00</td>
      <td>1 hr</td>
    </tr>
  </tbody>
</table>
</div>
--------------------------------------- **/

.study-timetable table {
  font-size: 1.2em;
  text-align: left;
  /*  padding: 5px 0px 5px 0px; */
  /*  margin: 0 0 10px 0; */
  border-spacing: 0px;  /* cellspacing */
}
.study-timetable tr {
  text-align: center;
}
.study-timetable td {
  color: #ffffff;
  font-weight: bold;
  width: 144px;
  padding: 0;
  /* background-color: #990099; 0000CC; */
}
.study-timetable th {
  color: #33CCFF;
  padding-bottom: 4px;
  border-bottom: 1px solid white;
}
.study-timetable th:first-child {
  border-right: 1px solid white;
}
.study-timetable td:first-child {
  color: #33CCFF;
  border-right: 1px solid white;
}
.study-timetable td + td {
  width: 262px;
  /* background-color: #0000FF; */
}
.study-timetable td + td + td {
  width: 145px;
  /* background-color: #0099FF; */
}

